<template>
  <div
    @click="
      $router.push({ name: 'article', params: { art_id: articleInfo.art_id } })
    "
  >
    <!-- 没有图片，根据后端返回的数据来判断 -->
    <van-cell v-if="type === 0" :title="articleInfo.title" :label="label" />

    <!-- 一张图片 根据后端返回的数据来判断-->
    <van-cell v-else-if="type === 1" :title="articleInfo.title" :label="label">
      <van-image width="100" height="100" :src="articleInfo.cover?.images[0]" />
    </van-cell>

    <!-- 两张图片 根据后端返回的数据来判断-->
    <van-cell v-else :title="articleInfo.title">
      <template #label>
        <van-image
          width="100"
          height="100"
          v-for="(obj, index) in articleInfo.cover?.images"
          :key="index"
          :src="obj"
        />
        <span>{{ label }}</span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import dayjs from '@/utils/dayjs'
export default {
  props: {
    articleInfo: {
      type: Object,
      //   给一个默认值
      default: () => ({})
    }
  },
  //   type写在页面泰国繁琐，计算属性里面解构一下
  computed: {
    type() {
      // 如果请求慢额情况下不会出现报错的情况
      return this.articleInfo.cover?.type
    },
    label() {
      const { aut_name, pubdate, comm_count } = this.articleInfo
      return `${aut_name} ${comm_count} ${dayjs(pubdate).fromNow()}`
    }
  },
  methods: {}
}
</script>

<style></style>
